<template>
  <div>
    <div class="language" style="margin-left: 10px">
      语言：
      <span v-for="(item, index) in languageSingerList" @click="language(item)">
        <span
          :style="{
            color: index == languageLable ? 'red' : 'black',
          }"
        >
          {{ item.name }}
        </span>
        |
      </span>
    </div>
    <div class="classify" style="margin-left: 10px">
      分类：
      <span v-for="(item, index) in classifyList" @click="classify(item)">
        <span
          :style="{
            color: index == classifyLable ? 'red' : 'black',
          }"
        >
          {{ item.name }}
        </span>
        |
      </span>
    </div>
    <div class="filtrate" style="margin-left: 10px">
      筛选：
      <span v-for="(item, index) in filtrateList" @click="filtrate(item)">
        <span
          :style="{
            color: index == filtrateLable ? 'red' : 'black',
          }"
          >{{ item }}
        </span>
        |
      </span>
    </div>

    <div v-for="item in singerList" class="outerDiv" v-loading="loading">
      <img :src="item.picUrl" class="img" @click="toSingerPage(item.id)" />
      <span class="name"> {{ item.name }}</span>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { getSingerList } from "../../service/songs";
import { storage } from "@/stores/storage";
import router from "../../router";
export default defineComponent({
  created() {
    this.getSingerListFun();
  },
  setup() {
    let store = storage();
    let loading = ref(true);
    let languageLable = ref(0);
    let classifyLable = ref(0);
    let filtrateLable = ref(0);
    const { singerList, singerParam, languageSingerList, classifyList } = storeToRefs(
      store
    );
    let filtrateList = ref([
      "热门",
      "A",
      "B",
      "C",
      "D",
      "E",
      "F",
      "G",
      "H",
      "I",
      "J",
      "K",
      "L",
      "M",
      "N",
      "O",
      "P",
      "Q",
      "R",
      "S",
      "T",
      "U",
      "V",
      "W",
      "X",
      "Y",
      "Z",
      "#",
    ]);
    let type = -1,
      area = -1,
      initial = "X";
    let param = {
      type,
      area,
      initial,
    };
    // store.setSingerParam(param)

    function language(item) {
      for (let i = 0; i < languageSingerList.value.length; i++) {
        if (item.value === languageSingerList.value[i].value) languageLable.value = i;
      }
      param.area = item.value;
      store.setSingerParam(param);
      getSingerListFun();
    }
    function classify(item) {
      for (let i = 0; i < classifyList.value.length; i++) {
        if (item.value === classifyList.value[i].value) classifyLable.value = i;
      }
      param.type = item.value;
      store.setSingerParam(param);
      getSingerListFun();
    }
    function filtrate(item) {
      for (let i = 0; i < filtrateList.value.length; i++) {
        if (item === filtrateList.value[i]) filtrateLable.value = i;
      }
      if (item === "热门") item = -1;
      else if (item === "#") item = 0;
      param.initial = item;
      store.setSingerParam(param);
      getSingerListFun();
    }
    function toSingerPage(id) {
      store.setSingerId(id);
      router.push({
        path: "/singer",
      });
    }
    function getSingerListFun() {
      getSingerList(singerParam.value)
        .then((res) => {
          if (res.status === 200) {
            let data = res.data.artists;
            let tableData = ref([]);
            for (let i = 0; i < data.length; i++) {
              tableData.value[i] = {};
              tableData.value[i].name = data[i].name;
              tableData.value[i].picUrl = data[i].picUrl;
              tableData.value[i].id = data[i].id;
            }
            store.setSingerList(tableData.value);
            loading.value = false;
          }
        })
        .catch((err) => {
          ElMessage("网络错误,请重新尝试");
        });
    }

    return {
      getSingerListFun,
      filtrate,
      language,
      classify,
      toSingerPage,
      singerList,
      languageSingerList,
      classifyList,
      filtrateList,
      loading,
      languageLable,
      classifyLable,
      filtrateLable,
    };
  },
});
</script>

<style scoped>
.outerDiv {
  height: 200px;
  width: 150px;
  margin: 25px;
  float: left;
}
.img {
  height: 150px;
  width: 150px;
  border-radius: 10px;
  transition: 1s;
}
.img:hover {
  transform: scale(0.9);
}

.name {
  height: 50px;
  width: 150px;
}
.language {
  margin: 20px 0;
  cursor: pointer;
}
.classify {
  margin: 20px 0;
  cursor: pointer;
}

.filtrate {
  margin: 20px 0;
  cursor: pointer;
}
</style>
